<template>
  <!-- 个人中心 -->
  <div class="box">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="15"></ceList>
      <div class="con">
        <div class="bianji" v-if="!modifiedData">
          <!-- 商家样式 -->
          <!-- <div class="ming">个人信息</div> -->
          <!-- 经纪人样式 -->
          <div class="messageTab" style="height: 0">
            <div
              class="messageTab_item"
              @click="messageTabClick(1)"
              v-show="messageTab == 99"
              :class="messageTab == 1 ? 'messageTab_active' : ''"
            >
              个人信息
            </div>
            <div
              class="messageTab_item"
              @click="messageTabClick(2)"
              v-show="messageTab == 99"
              :class="messageTab == 2 ? 'messageTab_active' : ''"
              v-if="user.isShop == '1'"
            >
              认证资料
            </div>
            <div
              class="messageTab_item"
              @click="messageTabClick(3)"
              v-show="messageTab == 99"
              :class="messageTab == 3 ? 'messageTab_active' : ''"
            >
              账号注销
            </div>
          </div>
          <template v-if="messageTab == 1">
            <div class="ming" style="margin: 24px auto 48px">
              个人资料

              <!-- <div class="right">修改认证信息</div> -->
            </div>
            <div class="lei" style="margin-top: 60px">
              <p class="p" style="vertical-align: top">头像</p>
              <!-- :action="$upLoad" -->
              <el-upload
                ref="upload"
                class="avatar-uploader"
                :show-file-list="false"
                :action="$upLoad"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :on-change="uploadFile"
                :auto-upload="false"
              >
                <img
                  v-if="
                    imageUrl ||
                    'https://pic.bangbangtongcheng.com/static/my/header.png'
                  "
                  :src="
                    imageUrl ||
                    'https://pic.bangbangtongcheng.com/static/my/header.png'
                  "
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <span class="" style="color: #999999; line-height: 25px"
                >您可以上传jpg、png文件</span
              >

              <div
                style="
                  display: flex;
                  background-color: #707070;
                  color: #ffffff;
                  font-size: 16px;
                  width: 178px;
                  align-items: center;
                  justify-content: center;
                  position: relative;
                  left: 385px;
                  bottom: 24px;
                  cursor: pointer;
                "
                @click="goUploadTou"
              >
                <p class="el-icon-circle-plus-outline"></p>
                <div>本地上传头像</div>
              </div>
            </div>
            <div class="lei">
              <p class="p">用户名</p>
              <el-input
                v-model="user.nikeName"
                placeholder="请输入名称"
              ></el-input>
              <div class="div" @click="updata(1)">
                <p class="el-icon-edit" style="font-size: 24px"></p>
                修改
              </div>
            </div>
            <div class="lei">
              <p class="p">联系电话</p>
              <el-input
                v-model="user.phone"
                placeholder="请输入联系电话"
                :disabled="!modifyPhone"
              ></el-input>
              <div class="div" @click="updata(2)">
                <p class="el-icon-edit" style="font-size: 24px"></p>
                修改
              </div>
            </div>
            <div class="lei">
              <p class="p">设置密码</p>
              <div class="div" @click="updata(5)" style="margin-left: 10px">
                <p class="el-icon-edit" style="font-size: 24px"></p>
                修改
              </div>
            </div>
            <div class="lei">
              <p class="p">绑定微信</p>

              <div class="div" @click="" style="margin-left: 10px">
                <el-popover
                  placement="right"
                  trigger="click"
                  v-model="visible"
                  ref="popoverRef"
                >
                  <p class="p" style="text-align: center; font-size: 20px">
                    绑定微信
                  </p>
                  <div
                    style="
                      padding: 0 16px;
                      width: 286px;
                      height: 296px;
                      position: relative;
                      overflow: hidden;
                    "
                  >
                    <div
                      style="
                        position: absolute;
                        top: -42px;
                        left: 50%;
                        transform: translateX(-50%);
                      "
                      id="wechat-login"
                    ></div>
                  </div>
                  <!-- <div style="padding: 0 16px;width: 286px;height: 286px;" id="wechat-login">

  </div> -->
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible = false"
                      >取消</el-button
                    >
                  </div>

                  <el-switch
                    slot="reference"
                    @click.native.prevent
                    v-model="bindWX"
                    active-color="#64b6a8"
                    @change="updata(11)"
                    inactive-color="#cccccc"
                  >
                  </el-switch>
                  <!-- <el-checkbox slot="reference" label="+自定义" class="add-checkbox"
    @click.native.prevent="selectLastCheckBox"></el-checkbox> -->
                </el-popover>
              </div>
            </div>
            <div class="lei" v-if="user.isShop == '1'">
              <p class="p">认证资料</p>
              <div class="div" style="margin-left: 10px" @click="updata(6)">
                <p class="el-icon-edit" style="font-size: 24px"></p>
                修改
              </div>
            </div>
          </template>
          <template v-if="messageTab == 2">
            <div class="ming" style="margin: 24px auto 48px">
              认证信息

              <div
                class="right"
                @click.stop="amend = -1 * amend"
                style="cursor: pointer"
              >
                修改认证信息
              </div>
            </div>
            <div style="" class="form-wrap">
              <template v-if="user.businessType == 2 && user.isShop != 1">
                <certification type="bbcz" :amend="amend"></certification>
              </template>
              <template v-if="user.businessType == 2 && user.isShop == 1">
                <peakfire :amend="amend"></peakfire>
              </template>
              <template v-if="user.businessType == 1 && user.isShop != 1">
                <fybroker :amend="amend"></fybroker>
              </template>
              <template v-if="user.businessType == 1 && user.isShop == 1">
                <fcmerchant :amend="amend"></fcmerchant>
              </template>
              <template
                v-if="
                  (!user.businessType || user.businessType == '0') &&
                  user.personalRecruitmentStatus == 1 &&
                  user.enterpriseRecruitmentStatus != 1
                "
              >
                <certificationInformation
                  :amend="amend"
                ></certificationInformation>
              </template>
              <template
                v-if="
                  (!user.businessType || user.businessType == '0') &&
                  user.enterpriseRecruitmentStatus == 1
                "
              >
                <certificationCompany :amend="amend"></certificationCompany>
              </template>
            </div>
          </template>
          <template v-if="messageTab == 3">
            <div class="bianji" style="border: none">
              <div class="ming">账号注销</div>
              <div class="wenben">
                <h4>账号注销条件:</h4>
                <p>
                  当前为账号注销页面，注销账号前，我们需要对您的信息进行审核，以保证您的账号安全，且审核时间段内，请保证您的账号状态如下:
                  <br />·账号为正常状态 <br />·账号无任何纠纷，包含投诉举报
                  <br />·账号处于安全状态，无被盗风险
                </p>
              </div>
              <div class="wenben">
                <h4>账号注销须知:</h4>
                <p>
                  ·账号注销后，您的账号下的全部权益将清除
                  <br />·账号注销后，您的账号下的所有数据、记录等将无法访问和找回
                  <br />·账号一旦注销完成，将无法恢复
                  <br />·账号注销处理需要一定的周期，请您耐心等待。
                </p>
              </div>
              <div class="Departure">
                <div
                  class="btn"
                  v-if="
                    user.businessType == 1 &&
                    user.isAgent == 1 &&
                    user.isShop == 0 &&
                    user.shopType != 2 &&
                    loading &&
                    !confirm
                  "
                  @click="voluntary"
                >
                  主动离职
                </div>
                <div
                  class="btn"
                  v-if="
                    user.businessType == 2 &&
                    user.isAgent == 1 &&
                    user.isShop == 0 &&
                    loading &&
                    !confirm
                  "
                  @click="voluntary"
                >
                  主动离职
                </div>
                <div class="btn" @click="updata(7)">继续注销</div>
              </div>
            </div>
          </template>
        </div>
        <div class="modifiedCss" v-if="modifiedData">
          <div class="title">修改认证资料</div>

          <template v-if="user.businessType == 2 && user.isShop != 1">
            <certification type="bbcz"></certification>
          </template>
          <template v-if="user.businessType == 2 && user.isShop == 1">
            <peakfire></peakfire>
          </template>
          <template v-if="user.businessType == 1 && user.isShop != 1">
            <fybroker></fybroker>
          </template>
          <template v-if="user.businessType == 1 && user.isShop == 1">
            <fcmerchant></fcmerchant>
          </template>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="cancelVisible"
      class="cancel-visible"
      center
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="cancel-tip">为确认注销操作为用户本人进行，请进行验证</div>
      <div class="input-wrap">
        <input
          type="number"
          v-model="user.phone"
          placeholder="请输入绑定的手机号码"
          maxlength="11"
        />
      </div>
      <div class="input-wrap">
        <input
          type="number"
          maxlength="6"
          v-model="cancelAuthCode"
          placeholder="请输入验证码"
        />
        <div class="input-code" @click="open">
          {{ time == -1 ? "获取验证码" : time + "s后重新获取" }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelVisible = false">取 消</el-button>
        <el-button type="primary" @click="updata(4)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="topVisible"
      width="26%"
      center
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="width: 100%; display: flex; flex-direction: column">
        <div
          style="
            display: flex;
            color: #000000;
            font-size: 20px;
            font-weight: 400;
            padding: 10px 20px;
          "
        >
          <div>置顶信息：</div>
          <div>
            <div
              style="
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 240px;
              "
              v-for="(item, index) in houseList"
              v-if="item.choose"
              :key="index"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div
          style="
            display: flex;
            margin-top: 26px;
            align-items: center;
            padding: 0px 20px;
          "
        >
          <div style="color: #000000; font-size: 20px">置顶天数：</div>
          <input
            v-model="day"
            placeholder="请输入置顶天数"
            style="border: #e0e0e0 1px solid; width: 240px"
          />
        </div>
        <div
          style="
            color: #ea4b4b;
            font-size: 18px;
            margin-top: 31px;
            padding: 0px 20px;
          "
        >
          平台规则：每天限定置顶20条次，置顶信息按时间排序
        </div>
        <div
          style="
            width: 100%;
            height: 65px;
            margin-top: 32px;
            font-size: 21px;
            font-weight: 400;
            display: flex;
          "
        >
          <div
            style="
              width: 50%;
              background-color: #f2f2f2;
              color: #333333;
              text-align: center;
              line-height: 65px;
              border-bottom-left-radius: 10px;
              cursor: pointer;
            "
            @click="topVisible = false"
          >
            取消
          </div>
          <div
            style="
              width: 50%;
              background-color: #64b6a8;
              color: #ffffff;
              text-align: center;
              line-height: 65px;
              border-bottom-right-radius: 10px;
              cursor: pointer;
            "
            @click="topSub"
          >
            确认
          </div>
        </div>
      </div>
    </el-dialog>
    <floor></floor>
    <!-- 修改手机号 -->
    <div class="xgphone" v-if="phonestate" @click="phonestate = false">
      <!-- <div class="xgphone_item" @click.stop="">
            <div class="lei">
                <span class="lei_span">手机号：</span>
                <input class="let_input" type="text" disabled v-model="user.phone">
            </div>
            <div class="lei">
                <input class="let_input" placeholder="请输入验证码" type="text">
                 <p class="input_p" @click="phoneCodeClick">{{ yzm }}</p>
            </div>
            <div class="but">下一步</div>
        </div> -->
      <div class="xgphone_item" @click.stop="">
        <div class="lei">
          <input class="let_input" placeholder="请输入新的手机号" type="text" />
        </div>
        <div class="lei">
          <input class="let_input" placeholder="请输入验证码" type="text" />
          <p class="input_p" @click="phoneCodeClick">{{ yzm }}</p>
        </div>
        <div class="queren" @click="btnSub(true)">确认</div>
        <div class="quxiao" @click="btnSub(false)">取消</div>
      </div>
    </div>
    <!-- 修改密码 -->
    <div class="xgmm" v-if="passwordstate" @click="passwordstate = false">
      <div class="xgmm_item" @click.stop="">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="user.password ? '修改密码' : '设置密码'"
            name="first"
          >
            <div class="lei" style="margin-top: 40px" v-if="user.password">
              <p class="p">输入旧密码</p>
              <input
                class="lei_input"
                show-password
                v-model="oldpwd"
                placeholder="请输入旧密码"
              />
            </div>
            <div class="lei" :style="!user.password ? 'margin-top: 24px;' : ''">
              <p class="p">设置新密码</p>
              <input
                class="lei_input"
                show-password
                v-model="onepwd"
                placeholder="设置新密码"
              />
            </div>
            <div class="lei">
              <p class="p">确认新密码</p>
              <input
                class="lei_input"
                show-password
                v-model="twopwd"
                placeholder="确认新密码"
              />
            </div>
            <div class="but" @click="updatPwd(1)">保存修改</div>
          </el-tab-pane>
          <el-tab-pane label="重置密码" name="second">
            <div class="lei" style="margin-top: 40px">
              <p class="p">输入手机号</p>
              <input
                class="lei_input"
                v-model="phone"
                placeholder="输入手机号"
              />
            </div>
            <div class="lei">
              <p class="p">输入验证码</p>
              <input
                class="lei_input"
                v-model="phoneCode"
                placeholder="输入验证码"
              />
              <p class="input_p" @click="phoneCodeClick">{{ yzm }}</p>
            </div>
            <div class="lei">
              <p class="p">设置新密码</p>
              <input
                class="lei_input"
                show-password
                v-model="onepwd"
                placeholder="设置新密码"
              />
            </div>
            <div class="lei">
              <p class="p">确认新密码</p>
              <input
                class="lei_input"
                show-password
                v-model="twopwd"
                placeholder="确认新密码"
              />
            </div>
            <div class="but" @click="updatPwd(2)">保存修改</div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="con2" v-if="con2">
      <slide-verify
        class="verify"
        ref="slideblock"
        @again="onAgain"
        @fulfilled="onFulfilled"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :slider-text="text"
      >
        <!-- :accuracy="accuracy" -->
      </slide-verify>
      <i
        class="el-icon-circle-close"
        style="
          position: absolute;
          right: 38.5%;
          font-size: 40px;
          cursor: pointer;
          top: 34.4%;
        "
        @click="ycCon()"
      ></i>
    </div>
    <el-dialog title="图片" :visible.sync="dialogFormVisible">
      <div style="width: 100%; height: 500px">
        <vue-cropper
          autoCrop
          :fixedBox="option.fixedBox"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :img="showImg"
          ref="cropper"
          centerBox
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmnn">确 定</el-button>
      </div>
    </el-dialog>
    <verify-code
      @successHandler="sendVcerifyCode"
      ref="verifycode"
    ></verify-code>
  </div>
</template>
<script>
import floor from "../../../components/floor";
import heads from "../../../components/head";
import ceList from "../../../components/ceList.vue";
import titlesearch from "../../../components/titlesearch.vue";
import peakfire from "../../../components/peakfire.vue";
import certification from "../../../components/certification.vue";
import fybroker from "../../../components/bbfc/fcbroker.vue";
import fcmerchant from "../../../components/bbfc/fcmerchant.vue";
import verifyCode from "@/views/invite/comp/verifyCode.vue";
import certificationInformation from "@/views/invite/release/certificationInformation";
import certificationCompany from "@/views/invite/release/certificationCompany";

import axios from "axios";
import { mapMutations } from "vuex";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
    peakfire,
    certification,
    fybroker,
    fcmerchant,
    verifyCode,
    certificationCompany,
    certificationInformation,
  },

  data() {
    return {
      visible: false,
      bindWX: false,
      cancelVisible: false,
      cancelAuthCode: "",
      loading: false,
      showImg: "",
      dialogFormVisible: false,
      option: {
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式 jpeg, png, webp
        info: true, // 裁剪框的大小信息
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 345, // 默认生成截图框宽度
        autoCropHeight: 245, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
        canMove: true, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        full: true, // 是否输出原图比例的截图
        enlarge: "1", // 图片根据截图框输出比例倍数
        mode: "contain", // 图片默认渲染方式 contain , cover, 100px, 100% auto
        modifyPhone: true,
      },
      confirm: false,
      activeName: "first",
      yzm: "获取验证码",
      options: [
        { value: 0, label: "首页" },
        { value: 1, label: "房源信息" },
      ],
      options2: [
        { value: 1, label: "上架" },
        { value: 2, label: "下架" },
        { value: 3, label: "已出租" },
        { value: 4, label: "已出售" },
      ],
      compilestate: false,
      housevalue: "",
      housevalue2: "",
      xuan: 8,
      imageUrl: "",
      input: "",
      user: {
        nikeName: "",
        phone: "",
        password: "",
      },
      loginstate: false,
      userdata: {},
      houseList: [],
      housetotal: 0,
      houseindex: 1,
      topVisible: false,
      xzList: [],
      day: "",
      phone: "",
      newPhone: "",
      oldpwd: "",
      onepwd: "",
      twopwd: "",
      phoneCode: "",
      shijian: 60,
      imgurl: this.$img,
      codeTime: 60,
      phonestate: false,
      con2: false,
      text: "",
      passwordstate: false,
      modifiedData: false,
      messageTab: 1,
      time: -1,
      timer: null,
      amend: 1,
    };
  },
  created() {
    this.getUser();
    var type = this.$route.query.type;
    if (!type) {
      type = "personal";
    }
    if (type == "personal") {
      this.messageTabClick(1);

      this.queryBindWeChat();
    } else if (type == "auth") {
      this.messageTabClick(2);
    } else if (type == "cancel") {
      this.messageTabClick(3);
    }
  },
  watch: {
    "$route.query.type": {
      handler(type, oldType) {
        if (!type || type == "personal") {
          this.messageTabClick(1);
        } else if (type == "auth") {
          this.messageTabClick(2);
        } else if (type == "cancel") {
          this.messageTabClick(3);
        }
      },
    },
    "$route.query.code": {
      handler(code, oldCode) {
        // if (code) {
        //   this.$getHttp("/pc/login/sweepLoginCode.do", {
        //     code
        //   }).then(res => {
        //     this.userOpenid = res.openId.unionid;
        //     this.bindWeChat(this.userOpenid, 1)
        //   })
        // } else {
        //   this.queryBindWeChat()
        // }
      },
    },
  },
  methods: {
    open() {
      if (this.time == -1) {
        this.refreash();
        this.$refs.verifycode.open();
      }
    },
    refreash() {
      this.$refs.verifycode.handleClick();
    },
    sendVcerifyCode() {
      this.$getHttp("/mob/login/phoneVerification.do", {
        phone: this.user.phone,
      }).then((data) => {
        this.$message({
          message: "获取验证码成功",
          type: "success",
          offset: 120,
          duration: 2000,
        });
        this.cancelCode = data.CODE;
        this.startTime(60);
      });
      // this.apiSendVcerifyCode();
    },

    startTime(time) {
      if (!time || time == -1) {
        return false;
      }
      this.time = time;
      this.timer = setInterval(() => {
        if (this.time <= 0) {
          clearInterval(this.timer);

          this.time--;
          return false;
        }
        this.time--;
      }, 1000);
    },
    ...mapMutations(["login"]),
    // 身份为经纪人时，tab切换
    messageTabClick(index) {
      this.messageTab = index;
      var type;
      if (index == 1) {
        type = "personal";
      } else if (index == 2) {
        type = "auth";
      } else if (index == 3) {
        type = "cancel";
      }
      this.$router.push({
        path: "/my/bbcz/bbczpersonal?type=" + type,
      });
    },
    voluntary() {
      if (this.user.isAgent == 0) {
        this.$message("您还不是经纪人！");
        return;
      } else {
        if (this.user.isShop == 1) {
          this.$message("商家不能主动离职,仅能注销！");
          return;
        }
        this.$confirm("确定要主动离职吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            var path;
            if (this.user.businessType == 1) {
              path = "mob/user/autoconfirmResignation";
            } else if (this.user.businessType == 2) {
              path = "api/mobile/vehicleOwner/voluntaryResignation";
            }

            this.$postHttp(path, {
              userId: this.user.id,
            }).then((res) => {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.getUserInfo();
              this.$router.push({ path: "/" });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    goUploadTou() {
      console.log("object");
      this.$refs.upload.submit();
    },
    uploadImg(e) {},
    uploadFile(file, fileList) {
      console.log(file, fileList);
      if (file.percentage + "" == "0") {
        const isJPG =
          file.raw.type.substring(0, 5) === "image" ||
          file.raw.type.substring(6, 7) == "g";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是图片格式!");
          return;
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过2M");
          return;
        }
        //    this.showImg =file.raw
        this.showImg = URL.createObjectURL(file.raw);
        this.dialogFormVisible = true;
      } else {
      }
    },
    confirmnn() {
      this.dialogFormVisible = false;
      // this.$refs.upload.submit()

      this.getCropData();
    },
    //   裁剪圖片
    getCropData() {
      let self = this;
      this.$refs.cropper.getCropData((data) => {
        console.log(data);
        let param = new FormData(); // 创建form对象
        param.append("file", this.dataURLtoBlob(data)); // 通过append向form对象添加数据

        console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
        let config = {
          headers: {
            "Content-Type":
              "multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq",
          },
        };

        // 添加请求头
        axios.post(this.$upLoad, param, config).then((response) => {
          response = response.data;

          if (response.code === 200) {
            this.$postHttp("/mob/user/updateUserInfo", {
              id: this.user.id,
              image: response.data[0].url,
            }).then((data) => {
              if (data.code == 200) {
                self.imageUrl = response.data[0].url;
                this.user.image = response.data[0].url;
                this.$message({
                  message: "修改头像成功！",
                  type: "success",
                  offset: 120,
                  duration: 2000,
                });
                this.getUserInfo();
              }
            });
          }
        });
      });
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },

    //获取验证码
    getCode() {
      var reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
      if (!reg_tel.test(this.newPhone)) {
        this.$message({
          message: "请输入正确手机号！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      this.con2 = true;
    },
    ycCon() {
      this.con2 = false;
    },
    onSuccess() {
      var than = this;
      than.con2 = false;
      this.$getHttp("/mob/login/phoneVerification.do", {
        phone: this.newPhone,
        type: 1,
      }).then((data) => {
        this.$message({
          message: "获取验证码成功",
          type: "success",
          offset: 120,
          duration: 2000,
        });
        var set = setInterval(() => {
          if (than.codeTime < 1) {
            clearInterval(set);
            // than.yzm = "获取验证码";
            than.codeTime = 60;
            return;
          }
          than.codeTime--;
        }, 1000);
      });
    },
    onFail() {
      console.log("验证不通过");
      this.msg = "";
    },
    onRefresh() {
      console.log("点击了刷新小图标");
      this.msg = "";
    },
    onFulfilled() {
      console.log("刷新成功啦！");
    },
    onAgain() {
      console.log("检测到非人为操作的哦！");
      this.msg = "try again";
      // 刷新
      this.$refs.slideblock.reset();
    },
    btnSub(type) {
      if (type) {
        if (this.newPhone == "") {
          this.$message({
            message: "请输入手机号",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        this.updateUser({
          id: this.user.id,
          phone: this.newPhone,
          phoneCode: this.phoneCode,
        });
        this.phonestate = true;
        var mo = function (e) {
          e.preventDefault();
        };
        // document.body.style.overflow = "hidden";
        // document.addEventListener("touchmove", mo, false);
      } else {
        this.phonestate = false;
        var mo = function (e) {
          e.preventDefault();
        };
        // document.body.style.overflow = ""; //出现滚动条
        // document.removeEventListener("touchmove", mo, false);
      }
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.modifyPhone =
          user.isAgent == "1" || user.isShop == "1" ? false : true;
        console.log(this.modifyPhone);
        this.loginstate = true;
        this.user = user;
        this.imageUrl = user.image;
        this.userdata = {
          nikeName: user.nikeName,
          phone: user.phone,
        };

        if (user.businessType == 1) {
          this.$getHttp("/mob/user/isMarkResignation", {
            userId: user.id,
          }).then((data) => {
            if (data.code == 200) {
              this.confirm = data.confirm;
              this.loading = true;
            }
          });
        } else {
          this.$getHttp(
            "/api/mobile/vehicleOwner/getWhetherMarkResignationByUserId",
            { userId: user.id }
          ).then((data) => {
            if (data.code == 200) {
              this.confirm = data.confirm;
              // console.log(data.confirmResignation);
              // console.log(this.confirm);
              this.loading = true;
            }
          });
        }
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        this.$router.push("/");
      }
      setTimeout(() => {
        console.log("loadingloadingloading", this.loading);
      }, 1000);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    phoneCodeClick() {
      if (this.yzm != "获取验证码") {
        return;
      }
      var reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
      if (!reg_tel.test(this.phone)) {
        this.$message({
          message: "请输入正确手机号！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      this.$getHttp("/mob/login/phoneVerification.do", {
        phone: this.phone,
        type: 1,
      }).then((data) => {
        if (data.code == 200) {
          var set = setInterval(() => {
            if (this.shijian < 1) {
              clearInterval(set);
              this.yzm = "获取验证码";
              this.shijian = 60;
              return;
            }
            this.yzm = this.shijian + "s后重新发送";
            this.shijian--;
          }, 1000);
          this.$message({
            message: "获取验证码成功",
            type: "success",
            offset: 120,
            duration: 2000,
          });
        }
      });
    },
    updata(type) {
      switch (type) {
        case 1:
          this.updateUser({
            id: this.user.id,
            nikeName: this.user.nikeName,
          });
          break;
        case 2:
          this.newPhone = "";
          this.phoneCode = "";
          this.phonestate = true;
          var mo = function (e) {
            e.preventDefault();
          };
          // document.body.style.overflow = "hidden";
          // document.addEventListener("touchmove", mo, false);
          break;
        case 7:
          this.cancelVisible = true;
          break;
        case 4:
          if (this.cancelAuthCode != this.cancelCode) {
            this.myErrorMessage("验证码不正确，请重新填写");
            return;
          }
          if (this.user.isAgent == 1 && this.user.isShop == 0) {
            this.myErrorMessage("经纪人需先离职，再注销");
            return;
          }
          this.$confirm("此操作将永久注销该账号, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              var path;
              if (this.user.businessType == 1) {
                path = "mob/user/cancellation";
              } else {
                path = "mob/user/cancellation";
              }
              this.$postHttp(path, {
                id: this.user.id,
              }).then((data) => {
                if (data.code == 200) {
                  this.$message({
                    type: "success",
                    message: "注销成功!",
                  });
                  localStorage.removeItem("userInfo");
                  this.$router.push({
                    path: "/",
                  });
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
          break;
        case 5:
          // this.newPhone = "";
          // this.phoneCode = "";
          this.passwordstate = true;
          var mo = function (e) {
            e.preventDefault();
          };
          // document.body.style.overflow = "hidden";
          // document.addEventListener("touchmove", mo, false);
          break;
        case 6:
          this.messageTabClick(2);
          // this.modifiedData=true
          break;
        case 11:
          console.log("绑定微信", this.bindWX);
          // true 为去绑定  false为去解绑
          if (this.bindWX) {
            this.bindWX = false;
            setTimeout(() => {
              // 创建微信登录的对象
              new WxLogin({
                self_redirect: false, // 是否在iframe内跳转 redirect_uri
                id: "wechat-login", // 希望二维码嵌入容器的 id
                state: +new Date(),
                appid: "wxd8e9827879a8d201",
                scope: "snsapi_login",
                response_type: "code",
                // redirect_uri: encodeURIComponent('https://ws.weisou.online/conven_web/#/?redirect_uri=bbczpersonal'),
                redirect_uri: encodeURIComponent(
                  "https://www.bangbangtongcheng.com/#/?redirect_uri=bbczpersonal"
                ),

                // redirect_uri: encodeURIComponent('http://192.168.0.118:8080/#/?redirect_uri=bbczpersonal'),
                // href:    'data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMjAwcHg7DQogIGhlaWdodDogMjAwcHg7DQp9DQo=',
              });
            });
          } else {
            this.bindWX = true;
            setTimeout(() => {
              this.$refs.popoverRef.doClose();
            });
            this.bindWeChat("", 0);
          }
          // this.modifiedData=true
          break;
      }
    },
    // 绑定vx/解绑vx
    bindWeChat(id, index) {
      this.$postHttp("/api/mobile/public/bindingOrUnbindWeChat", {
        userId: this.user.id,
        bindingState: index,
        openId: id || "",
      }).then((res) => {
        this.mySuccessMessage(res.msg);

        setTimeout(() => {
          this.queryBindWeChat();
        }, 500);
      });
    },
    // 判断用户是否绑定微信
    queryBindWeChat() {
      this.$getHttp("/api/mobile/public/whetherBindWeChatLogin", {
        userId: this.user.id,
      }).then((res) => {
        if (res.existBindWeChatLogin == 1) {
          this.bindWX = true;
        } else {
          this.bindWX = false;
        }
      });
    },
    updateUser(data) {
      this.$postHttp("/mob/user/updateUserInfo", data).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "修改成功！",
            type: "success",
            offset: 120,
            duration: 2000,
          });

          this.getUserInfo();
        }
      });
    },
    getUserInfo() {
      this.$getHttp("/mob/login/getUserInfoByPhone", {
        phone: this.user.phone,
      }).then((data) => {
        if (data.code == 200) {
          localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
          this.login({ user_name: data.userInfo.nikeName });
          this.user = data.userInfo;
        }
      });
    },
    xuanClick(num) {
      this.xuan = num;
      switch (num) {
        case 1:
          this.$router.push({
            path: "/my/index",
          });
          break;
        case 3:
          this.$router.push({
            path: "/my/issue",
          });
          break;
        case 4:
          this.$router.push({
            path: "/my/collect",
          });
          break;
        case 5:
          this.$router.push({
            path: "/my/browsing",
          });
          break;
        case 6:
          this.$router.push({
            path: "/my/inform",
          });
          break;
        case 10:
          this.$router.push({
            path: "/my/instrument",
          });
          break;
      }
    },
    updatPwd(type) {
      if (type == 1) {
        if (this.oldpwd == "" && this.user.password) {
          this.$message({
            message: "请输入旧密码",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (this.twopwd == "") {
          this.$message({
            message: "请输入新密码",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (this.onepwd.trim() == this.twopwd.trim()) {
          this.$postHttp("/mob/login/updatePassByPass", {
            id: this.user.id,
            password: this.twopwd.trim(),
            oldPassword: this.oldpwd.trim(),
          }).then((data) => {
            if (data.code == 200 && data.success) {
              this.$message({
                message: "密码修改成功！",
                type: "success",
                offset: 120,
                duration: 2000,
              });
              this.getUserInfo();
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                offset: 120,
                duration: 2000,
              });
            }
          });
        } else {
          this.$message({
            message: "2次新密码不一致！",
            type: "error",
            offset: 120,
            duration: 2000,
          });
        }
      } else {
        if (this.phone == "") {
          this.$message({
            message: "请输入手机号",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (this.phoneCode == "") {
          this.$message({
            message: "请输入验证码",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (this.twopwd == "") {
          this.$message({
            message: "请输入新密码",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        if (this.phoneCode) {
          this.$postHttp("/mob/login/updatePassByPass", {
            id: this.user.id,
            phone: this.phone,
            phoneCode: this.phoneCode,
            password: this.twopwd.trim(),
          }).then((data) => {
            if (data.code == 200 && data.success) {
              this.$message({
                message: "密码修改成功！",
                type: "success",
                offset: 120,
                duration: 2000,
              });
              this.getUserInfo();
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                offset: 120,
                duration: 2000,
              });
            }
          });
        } else {
          this.$message({
            message: "验证码不能为空",
            type: "error",
            offset: 120,
            duration: 2000,
          });
        }
      }
    },
    handleAvatarSuccess(response, file, fileList) {
      console.log("response", response);
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$postHttp("/mob/user/updateUserInfo", {
        id: this.user.id,
        image: response.data[0].url,
      }).then((data) => {
        if (data.code == 200) {
          this.user.image = response.data[0].url;
          this.$message({
            message: "修改头像成功！",
            type: "success",
            offset: 120,
            duration: 2000,
          });
          this.getUserInfo();
        }
      });
    },
    operation() {
      this.$confirm(
        "此操作将" +
          this.options2[this.housevalue2 - 1].label +
          "该房源, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.houseList.forEach((e) => {
            if (e.choose) {
              this.$postHttp("/mob/home/updateUpStatus", {
                userId: this.user.id,
                id: e.id,
                upStatus: this.housevalue2,
              }).then((data) => {
                if (data.code == 200) {
                  this.$message({
                    message:
                      this.options2[this.housevalue2 - 1].label + "成功！",
                    type: "success",
                    offset: 120,
                    duration: 2000,
                  });
                  this.initgetHouseInfo();
                }
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消" + this.options2[this.housevalue2 - 1].label,
          });
        });
    },
    housecompile(type) {
      this.compilestate = type;
    },
    openTop(index) {
      this.houseList.forEach((e) => {
        if (e.choose) {
          this.topVisible = true;
        }
      });
    },
    initgetHouseInfo() {
      this.housepage.pageNo = 1;
      this.getHouseInfo();
    },
    //确认置顶
    topSub() {
      if (this.day == "") {
        this.$message({
          message: "请输入置顶天数！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      } else {
        this.houseList.forEach((e) => {
          if (e.choose) {
            this.$postHttp("/mob/home/updateUpHomePage", {
              id: e.id,
              dayNum: this.day,
              isShow: this.housevalue,
            }).then((data) => {
              if (data.code == 200) {
                this.$message({
                  message: "置顶成功！",
                  type: "success",
                  offset: 120,
                  duration: 2000,
                });
                this.initgetHouseInfo();
              }
            });
          }
          e.choose = false;
        });
        this.topVisible = false;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type.substring(0, 5) === "image" ||
        file.type.substring(6, 7) == "g";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是图片格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2M");
        return;
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="less" scoped>
.form-wrap {
  /deep/.form {
    margin: 0 auto;
  }

  /deep/.box .form {
    margin-left: 50%;
  }
}

.con2 {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 991;

  .verify {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /deep/.slide-verify-slider {
      border: 0;
      margin-top: -5px;
    }
  }
}

.xgmm {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .xgmm_item {
    color: #000000;
    width: 460px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 30px;
    align-items: center;
    border-radius: 10px;
    justify-content: space-between;

    .lei {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 320px;
      height: 57px;
      margin-bottom: 24px;
      position: relative;

      .p {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
      }

      .lei_input {
        box-sizing: border-box;
        width: 220px;
        height: 57px;
        border-bottom: 1px solid #e0e0e0;
        padding: 12px;
      }

      .input_p {
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        color: #64b6a8;
        font-size: 18px;
        cursor: pointer;
      }
    }

    .but {
      width: 150px;
      height: 40px;
      background-color: #64b6a8;
      border-radius: 5px;
      margin: 0 auto;
      font-size: 19px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
  }
}

.xgphone {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .xgphone_item {
    color: #000000;
    width: 460px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 30px;
    align-items: center;
    border-radius: 10px;
    justify-content: space-between;

    .lei {
      display: flex;
      align-items: center;
      width: 350px;
      height: 50px;
      margin-bottom: 10px;
      border-bottom: 1px solid #e0e0e0;
      position: relative;

      .lei_span {
        color: #999;
        font-size: 16px;
      }

      .lei_input {
        box-sizing: border-box;
        width: 220px;
        height: 50px;
        color: #000;
        padding: 12px;
      }

      .input_p {
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        color: #64b6a8;
        font-size: 18px;
        cursor: pointer;
      }
    }

    .but {
      width: 150px;
      height: 40px;
      background-color: #64b6a8;
      border-radius: 5px;
      margin: 0 auto;
      font-size: 19px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      margin-top: 34px;
    }

    .queren {
      display: flex;
      width: 350px;
      height: 40px;
      background-color: #64b6a8;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 34px;
      margin-bottom: 10px;
    }

    .quxiao {
      width: 350px;
      height: 40px;
      color: #777777;
      font-size: 14px;
      cursor: pointer;
      text-align: center;
      line-height: 40px;
    }
  }
}

.houselist {
  width: 936px;
  height: 820px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  vertical-align: top;
  display: inline-block;

  .h1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #333333;
  }

  .title {
    display: flex;
    padding: 25px 34px;
    color: #333333;
    font-size: 20px;
    align-items: center;
    border-bottom: #e0e0e0 1px solid;
    justify-content: space-between;
  }

  .ttext {
    margin-right: 60px;
    cursor: pointer;
  }

  .xttext {
    color: #64b6a8;
    font-size: 26px;
    margin-right: 54px;
    cursor: pointer;
  }

  .house {
    width: 100%;
    height: 630px;

    .houseview {
      width: 100%;
      height: 218px;
      padding: 32px;
      box-sizing: border-box;
      display: flex;

      img {
        width: 230px;
        height: 154px;
      }
    }
  }
}

.box {
  position: relative;
  padding-bottom: 200px;
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;

  .bianji {
    padding-bottom: 65px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;

    .ming {
      width: 876px;
      height: 56px;
      line-height: 56px;
      font-size: 20px;
      background: #f2f2f2;
      text-indent: 23px;
      margin-left: 32px;
      margin-top: 24px;
      display: flex;
      justify-content: space-between;

      .right {
        width: 174px;
        height: 56px;
        background: #64b6a8;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 56px;
      }
    }

    .messageTab {
      height: 120px;
      display: flex;
      align-items: center;
      margin-left: 55px;

      .messageTab_item {
        width: 150px;
        height: 50px;
        font-size: 20px;
        font-weight: 600;
        color: #666666;
        margin-right: 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      .messageTab_active {
        font-size: 22px;
        font-weight: 600;
        color: #64b6a8;
      }
    }

    .lei {
      margin-top: 40px;

      .p {
        display: inline-block;
        vertical-align: unset;
        width: 100px;
        font-size: 20px;
        text-align: left;
        margin-left: 210px;
        margin-right: 70px;
        font-weight: 600;
      }

      /deep/ .el-input {
        width: 220px;
        font-size: 18px;

        .el-input__inner {
          border: 0;
          color: #333;
          border-bottom: 1px solid #e0e0e0;
          box-sizing: content-box;
          /* padding-bottom: 15px; */
        }
      }

      .div {
        display: inline-block;
        margin-left: 40px;
        font-size: 20px;
        color: #2264d2;
        cursor: pointer;
      }
    }

    .wenben {
      width: 835px;
      margin-left: 52px;
      margin-top: 40px;

      h4 {
        font-size: 20px;
        font-weight: 600;
        color: #333333;
        margin-bottom: 20px;
      }

      p {
        font-size: 20px;
        line-height: 45px;
      }
    }

    .but {
      width: 150px;
      height: 40px;
      line-height: 40px;
      background: #64b6a8;
      border-radius: 5px;
      color: #fff;
      text-align: center;
      font-size: 19px;
      cursor: pointer;
      margin-left: 395px;
      margin-top: 40px;
    }
  }

  .modifiedCss {
    padding-bottom: 65px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;

    .title {
      padding-left: 118px;
      height: 73px;
      line-height: 73px;
      font-size: 24px;
      font-weight: 600;
      color: #64b6a8;
    }

    /deep/.form {
      margin: 0 auto;
    }
  }
}

.gerenBox {
  width: 1200px;
  margin: 0 auto;
  margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .rig {
      position: absolute;
      right: 0;

      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}

.Departure {
  display: flex;
  justify-content: center;
  margin-top: 20px;

  .btn {
    width: 200px;
    height: 50px;
    background: #64b6a8;
    border-radius: 6px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    margin-left: 30px;
    cursor: pointer;
  }
}

.avatar-uploader {
  display: inline-block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.lei {
  /deep/.el-input__inner {
    border-radius: 20px;
    border: #64b6a8 1px solid;
    color: #64b6a8;
  }
}

/deep/.el-dialog__body {
  padding: 0px;
}

/deep/.el-dialog {
  border-radius: 20px;
}

/deep/.el-tabs__header {
  width: 185px;
  margin: 0 auto;
}

/deep/.el-tabs__item {
  font-size: 18px;
}

/deep/.is-active {
  font-weight: 600;
  color: #64b6a8;
}

/deep/.el-tabs__active-bar {
  background-color: #64b6a8;
  height: 3px;
}

.cancel-tip {
  margin-top: 60px;
}

.cancel-visible {
  /deep/ .el-dialog {
    margin-top: 28vh !important;
  }

  /deep/ .el-dialog__header {
    display: none;
  }

  /deep/ .el-dialog__footer {
    padding: 20px;
  }

  .cancel-tip {
    padding-top: 24px;

    height: 28px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    line-height: 28px;
    text-align: center;
  }

  .input-wrap {
    margin: 0 auto;
    width: 400px;
    box-sizing: border-box;
    height: 78px;
    border-bottom: 1px solid #dcdcdc;
    position: relative;
    padding-top: 30px;
    display: flex;
    align-items: center;

    input {
      height: 28px;
      flex: 1;

      font-size: 20px;
      font-weight: 400;
      color: #333333;
      line-height: 28px;
    }

    .input-code {
      white-space: nowrap;
      padding: 0 20px;
      text-align: right;
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #64b6a8;
      line-height: 28px;
      cursor: pointer;
    }
  }
}
</style>
